<template>
    <div>
        <el-row>

   
                <div class="specs-list flex unified-flex-space-between">

                    <div v-for="(item,index) in list" :key="index"
                        class="specs-item flex unified-flex-align unified-flex-space-between">

                        <!-- 规格名称 -->
                        <div class="name">
                            <el-input v-model="item.name" placeholder="销售规格名称"></el-input>
                        </div>
                        <!-- 价格 -->
                        <div class="price">
                            <el-input v-model="item.price" placeholder="价格"></el-input>
                        </div>
                        <!-- 单位 -->
                        <div class="company">
                            <el-input  v-model="item.company" placeholder="单位"></el-input>
                        </div>
                        <!-- 库存 -->
                        <div class="stock">
                            <el-input v-model="item.stock" placeholder="库存"></el-input>
                        </div>
                        <!-- 商家编码 -->
                        <div class="store-code">
                            <el-input v-model="item.store_code" placeholder="商家编码(选填)"></el-input>
                        </div>
                        <!-- 条形码 -->
                        <div class="bar-code">
                            <el-input v-model="item.bar_code"  placeholder="条形码(选填)"></el-input>
                        </div>



                        <el-button type="danger" icon="el-icon-delete" circle size="small" @click="remove(index)">
                        </el-button>
                    </div>
                </div>
                <div class="add-specs flex unified-flex-align unified-flex-center unified-cursor-default unified-text-select"
                    @click="add">
                    添加参数
                </div>



                <!-- <el-row v-for="(specsItem,index) in list" :key="index"
					class="unifined-row-collect flex unified-flex-align " :gutter="10">
                    
                    
                    
                    
                    
					<el-col :span="7">
						<el-input v-model="specsItem.specs_name" placeholder="规格名称"></el-input>
					</el-col>
					<el-col :span="4">
						<el-input type="number" v-model="specsItem.price" placeholder="价格(元)"></el-input>
					</el-col>
					<el-col :span="4">
						<el-input v-model="specsItem.company" placeholder="单位"></el-input>
					</el-col>
					<el-col :span="4">
						<el-input type="number" v-model="specsItem.stock" placeholder="库存数量"></el-input>
					</el-col>
					<el-col :span="5">
						<el-input v-model="specsItem.store_code" placeholder="商家编码(选填)"></el-input>
					</el-col>
					<el-col :span="5">
						<el-input v-model="specsItem.bar_code" placeholder="条形码(选填)"></el-input>
					</el-col>
				</el-row> -->

 
        </el-row>

        <transition name="el-zoom-in-top">
            <el-row class="unifined-row-collect" v-show="$store.state.GoodsConfig.specs_show_tips">
                <el-col :span="leftWidth"></el-col>
                <el-col :offset="leftWidth" :span="24-leftWidth">
                    <el-alert type="info" effect="dark" :closable="false"
                        :title="$store.state.GoodsConfig.specs_show_tips_text">
                    </el-alert>
                </el-col>

            </el-row>
        </transition>
    </div>
</template>

<script>
    export default {
        props: {
            leftWidth: {
                type: Number,
                default: 4
            },
            list: { // 销售规格数据
                type: Array,
                default () {
                    return [{}]
                }
            }
        },
        data() {

            return {}
        },
        methods: {
            // 新增商品销售规格
            add() {
                this.$emit('add')
            },
            remove(index) {
                this.$emit('remove', index)
            }
        }
    }
</script>

<style scoped="scoped">
    .page {
        padding: 20px 0%;
        margin: 20px 0px;
        border-top: 8px solid #C3C3C324;
        padding-top: 20px;
        font-size: 10px;
    }

    .specs-list {
        width: 100%;
        display: flex;
         flex-direction: column;
    }

    .specs-item {
        width: 100%;
        height: 60px;
    }

    .name,
    .price,
    .company,
    .stock,
    .bar-code,
    .store-code {
        flex: 1;
        margin-right: 8px;
    }

    .bar-code {
        margin-right: 15px;
    }

    .add-specs {
        width: 100%;
        height: 60px;
        background-color: #C3C3C3;
        border-radius: 10px;
        margin-top: 15px;
    }


    .unifined-row-collect /deep/ .el-input__inner {
        padding: 0px 5px;
        font-size: 6px;
    }

    .unifined-row-collect /deep/ .el-alert--info.is-dark {
        background-color: #C3C3C324;
        color: #817d7d;
        border-radius: 6px;
    }
</style>
